<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">知识库</text>
      <view class="search-box">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input type="text" class="search-input" placeholder="搜索问题或关键词" v-model="searchQuery" @confirm="searchKnowledge"/>
      </view>
    </view>
    
    <!-- 知识分类 -->
    <view class="category-grid">
      <view class="category-item" v-for="(category, index) in categories" :key="index" @click="selectCategory(category)">
        <view class="category-icon" :style="{backgroundColor: category.color}">
          <uni-icons :type="category.icon" size="24" color="#fff"></uni-icons>
        </view>
        <text class="category-name">{{category.name}}</text>
      </view>
    </view>
    
    <!-- 热门问题 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">热门问题</text>
        <text class="more" @click="viewAllQuestions">全部 ></text>
      </view>
      <view class="faq-list">
        <view class="faq-item" v-for="(item, index) in hotQuestions" :key="index" @click="viewQuestionDetail(item)">
          <view class="faq-question">
            <view class="q-icon">Q</view>
            <text class="q-text">{{item.question}}</text>
          </view>
          <view class="faq-stats">
            <text class="view-count">{{item.views}}浏览</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 问答社区 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">问答社区</text>
        <view class="ask-btn" @click="askQuestion">
          <uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
          <text>我要提问</text>
        </view>
      </view>
      <view class="community-tabs">
        <view class="tab-item" 
              v-for="(tab, index) in communityTabs" 
              :key="index"
              :class="{active: currentTab === tab.value}"
              @click="switchTab(tab.value)">
          {{tab.name}}
        </view>
      </view>
      <view class="question-list">
        <view class="question-item" v-for="(item, index) in communityQuestions" :key="index" @click="viewCommunityQuestion(item)">
          <view class="user-info">
            <image class="user-avatar" :src="item.userAvatar"></image>
            <view class="user-meta">
              <text class="user-name">{{item.userName}}</text>
              <text class="post-time">{{item.time}}</text>
            </view>
          </view>
          <view class="question-content">
            <text class="question-title">{{item.title}}</text>
            <text class="question-desc">{{item.description}}</text>
          </view>
          <view class="question-stats">
            <view class="stat-item">
              <uni-icons type="chat" size="14" color="#999"></uni-icons>
              <text>{{item.replyCount}}</text>
            </view>
            <view class="stat-item">
              <uni-icons type="eye" size="14" color="#999"></uni-icons>
              <text>{{item.viewCount}}</text>
            </view>
          </view>
          <view class="question-tags">
            <text class="tag-item" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
          </view>
        </view>
      </view>
      <view class="load-more" @click="loadMoreQuestions">
        <text>加载更多</text>
      </view>
    </view>
    
    <!-- 联系教练 -->
    <view class="section-card">
      <view class="card-header">
        <text class="section-title">联系教练</text>
      </view>
      <view class="coach-list">
        <view class="coach-item" v-for="(coach, index) in coaches" :key="index" @click="contactCoach(coach)">
          <image class="coach-avatar" :src="coach.avatar"></image>
          <view class="coach-info">
            <text class="coach-name">{{coach.name}}</text>
            <text class="coach-title">{{coach.title}}</text>
          </view>
          <view class="contact-btn">
            <text>咨询</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: "",
      categories: [
        { name: "比赛指南", icon: "medal", color: "#1890ff" },
        { name: "学习方法", icon: "help", color: "#f56c6c" },
        { name: "升学相关", icon: "paperplane", color: "#67c23a" },
        { name: "算法入门", icon: "compose", color: "#e6a23c" },
        { name: "编程语言", icon: "gear", color: "#909399" },
        { name: "家长指导", icon: "staff", color: "#9c27b0" }
      ],
      hotQuestions: [
        { 
          id: 1,
          question: "NOI和NOIP有什么区别？",
          answer: "NOI（全国信息学奥林匹克竞赛）是国家级比赛，是选拔国家集训队的重要依据；而NOIP（全国青少年信息学奥林匹克联赛）是全国性的初级赛事，分为普及组和提高组，是NOI的选拔性比赛。",
          views: 1532
        },
        { 
          id: 2,
          question: "信息学竞赛对升学有哪些帮助？",
          answer: "信息学竞赛成绩优异可以获得自主招生资格，例如NOI金牌、银牌获得者可以获得部分重点大学的降分或免试资格；省级一等奖以上也可能获得一些高校的加分政策。具体政策每年可能有调整，请关注各高校招生简章。",
          views: 2481
        },
        { 
          id: 3,
          question: "孩子几年级开始学习编程比较合适？",
          answer: "一般建议小学3-4年级以后开始接触简单的编程启蒙，如Scratch；5-6年级可以开始学习Python等编程语言基础；初中阶段可以开始系统学习C++和算法基础，为参加竞赛做准备。当然，每个孩子情况不同，可以根据兴趣和接受能力调整进度。",
          views: 1876
        }
      ],
      communityTabs: [
        { name: "最新问题", value: "latest" },
        { name: "热门问题", value: "hot" },
        { name: "我的问题", value: "mine" }
      ],
      currentTab: "latest",
      communityQuestions: [
        {
          id: 1,
          userAvatar: "/static/avatar1.png",
          userName: "张爸爸",
          time: "1小时前",
          title: "信息学竞赛和科学竞赛可以同时参加吗？",
          description: "孩子对信息学和科学都很感兴趣，想知道同时备战两个竞赛是否会太辛苦？有没有家长有类似经验可以分享？",
          replyCount: 5,
          viewCount: 89,
          tags: ["竞赛规划", "时间管理"]
        },
        {
          id: 2,
          userAvatar: "/static/avatar2.png",
          userName: "李妈妈",
          time: "昨天",
          title: "动态规划入门推荐哪些习题？",
          description: "孩子刚开始学动态规划，有没有推荐的入门习题集，最好是由易到难有详细讲解的那种。",
          replyCount: 8,
          viewCount: 123,
          tags: ["动态规划", "学习资源"]
        },
        {
          id: 3,
          userAvatar: "/static/avatar3.png",
          userName: "王妈妈",
          time: "3天前",
          title: "NOIP提高组备考计划怎么安排？",
          description: "孩子准备参加今年的NOIP提高组，现在是初三，平时学校作业也比较多，如何平衡竞赛和学业？",
          replyCount: 12,
          viewCount: 245,
          tags: ["NOIP", "备赛计划"]
        }
      ],
      coaches: [
        {
          id: 1,
          name: "张教练",
          title: "NOIP金牌教练",
          avatar: "/static/coach1.png"
        },
        {
          id: 2,
          name: "李教练",
          title: "算法竞赛专家",
          avatar: "/static/coach2.png"
        }
      ]
    };
  },
  methods: {
    searchKnowledge() {
      uni.showToast({
        title: '搜索: ' + this.searchQuery,
        icon: 'none'
      });
    },
    selectCategory(category) {
      uni.showToast({
        title: '选择分类: ' + category.name,
        icon: 'none'
      });
    },
    viewAllQuestions() {
      uni.showToast({
        title: '查看全部问题',
        icon: 'none'
      });
    },
    viewQuestionDetail(question) {
      uni.navigateTo({
        url: '/pages/knowledge/question?id=' + question.id
      });
    },
    askQuestion() {
      uni.showToast({
        title: '提问',
        icon: 'none'
      });
    },
    switchTab(tab) {
      this.currentTab = tab;
      // 根据标签加载不同的问题列表
    },
    viewCommunityQuestion(item) {
      uni.navigateTo({
        url: `/pages/knowledge/question?id=${item.id}&type=community`
      });
    },
    loadMoreQuestions() {
      uni.showToast({
        title: '加载更多问题',
        icon: 'none'
      });
    },
    contactCoach(coach) {
      uni.showToast({
        title: '联系教练: ' + coach.name,
        icon: 'none'
      });
    }
  }
};
</script>

<style>
.container {
  padding: 30rpx;
  padding-bottom: 100rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  flex-direction: column;
  margin-bottom: 30rpx;
}

.title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  font-size: 28rpx;
  margin-left: 10rpx;
}

.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.category-item {
  width: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.category-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 26rpx;
  color: #333;
}

.section-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.more {
  font-size: 26rpx;
  color: #1890ff;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: center;
  flex: 1;
}

.q-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 16rpx;
}

.q-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.faq-stats {
  display: flex;
  align-items: center;
}

.view-count {
  font-size: 24rpx;
  color: #999;
  margin-right: 10rpx;
}

.ask-btn {
  display: flex;
  align-items: center;
  background-color: #1890ff;
  color: #fff;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.ask-btn text {
  margin-left: 6rpx;
}

.community-tabs {
  display: flex;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.tab-item {
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #1890ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1rpx;
  left: 20rpx;
  right: 20rpx;
  height: 4rpx;
  background-color: #1890ff;
  border-radius: 2rpx;
}

.question-list {
  display: flex;
  flex-direction: column;
}

.question-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.question-item:last-child {
  border-bottom: none;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.user-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  margin-right: 16rpx;
}

.user-meta {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 26rpx;
  color: #333;
}

.post-time {
  font-size: 22rpx;
  color: #999;
}

.question-content {
  margin-bottom: 12rpx;
}

.question-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 8rpx;
  display: block;
}

.question-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.4;
  display: block;
}

.question-stats {
  display: flex;
  margin-bottom: 12rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  font-size: 24rpx;
  color: #999;
}

.stat-item text {
  margin-left: 6rpx;
}

.question-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  font-size: 22rpx;
  color: #1890ff;
  background-color: rgba(24, 144, 255, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  margin-right: 10rpx;
  margin-bottom: 6rpx;
}

.load-more {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #666;
}

.coach-list {
  display: flex;
  flex-direction: column;
}

.coach-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.coach-item:last-child {
  border-bottom: none;
}

.coach-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.coach-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.coach-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 6rpx;
}

.coach-title {
  font-size: 24rpx;
  color: #666;
}

.contact-btn {
  padding: 10rpx 24rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 30rpx;
  font-size: 26rpx;
}
</style> 